<template>
  <div class="app-container">
    <el-divider>
      <div class="my-divider">任务派工</div>
    </el-divider>
    <el-form ref="form" size="small" :model="form" :rules="rules" label-width="100px" label-position="left">
      <el-form-item label="班组名称" prop="wtaskGroup">
        <MyPopoverBtn placeholder="请选择班组" :content="pbsWorkGroup.wgName"
                      @click="openWorkGroupDialog"
        />
      </el-form-item>
      <el-form-item label="任务负责人">
        <el-input :value="form.wtaskManagerName" class="my-input" disabled />
      </el-form-item>
      <el-form-item label="其他成员">
        <MyPopoverBtn placeholder="请选择生产人员" :content="getWorkPeoName" @click="openWorkPeoDialog" />
      </el-form-item>

      <el-divider>
        <div class="my-divider">质检派工</div>
      </el-divider>
      <el-form-item label="质检人员" prop="wtaskQcPeo">
        <MyPopoverBtn placeholder="请选择质检人员"
                      :content="workQcPeo.userName"
                      @click="() => workQcPeoDialogVisible = true"
        />
      </el-form-item>

      <el-divider>
        <div class="my-divider">备注</div>
      </el-divider>
      <el-form-item label="备注" class="my-desc">
        <el-input v-model="form.wtaskPDesc" type="textarea" placeholder="请输入备注" :autosize="{minRows: 3}"
        />
      </el-form-item>
    </el-form>

    <!--    选择生产班组-->
    <el-dialog title="选择生产班组" :visible.sync="workGroupDialogVisible" width="50%" append-to-body>
      <el-form :model="workGroupQueryParams" ref="workGroupQueryForm" size="small" :inline="true"
               label-width="68px"
      >
        <el-form-item prop="wgCellCode" label-width="130px">
          <el-input
            v-model="workGroupQueryParams.wgCellCode"
            placeholder="请输入生产单元名称/编码"
            clearable
            @keyup.enter.native="handleQueryWorkGroup"
          />
        </el-form-item>
        <el-form-item prop="wgStatus">
          <el-select
            v-model="workGroupQueryParams.wgStatus"
            placeholder="请选择状态"
            clearable
          >
            <el-option
              v-for="dict in getStatus"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryWorkGroup">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQueryWorkGroup">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table v-loading="workGroupLoading" :data="workGroupList" highlight-current-row
                @current-change="handleChangeWorkGroup"
      >
        <el-table-column type="index" align="center">
          <template slot-scope="scope">
            <MyRadio v-model="prePbsWorkGroup.wgCode"
                     :label="scope.row.wgCode"
                     radio-name="selectedWorkGroup"
            />
          </template>
        </el-table-column>
        <el-table-column label="班组编码" align="center" prop="wgCode" />
        <el-table-column label="班组名称" align="center" prop="wgName" />
        <el-table-column label="班组类型" align="center" prop="pbsGroupType.groupTypeName" />
        <el-table-column label="负责人" align="center" prop="wgManagerName" />
        <el-table-column label="生产单元" align="center" prop="pbsWorkCell.workCellName" />
      </el-table>

      <pagination
        v-show="workGroupTotal>0"
        :total="workGroupTotal"
        :page.sync="workGroupQueryParams.pageNum"
        :limit.sync="workGroupQueryParams.pageSize"
        @pagination="getWorkGroupList"
      />

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="okWorkGroup">确 定</el-button>
        <el-button @click="cancelWorkGroup">取 消</el-button>
      </div>
    </el-dialog>

    <!--    选择生产班组下的成员-->
    <el-dialog title="选择成员" :visible.sync="workPeoDialogVisible" width="50%" append-to-body @open="getWorkPeoList">
      <el-transfer
        filterable
        :filter-method="filterWorkPeo"
        filter-placeholder="请输入人名"
        v-model="prePbsWorkPeo"
        :data="workGroupPeoList"
        :props="transferProps"
        :titles="['生产班组成员', '已选成员']"
        style="display: flex;
                justify-content: center;
                align-items: center;"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="okWorkPeo">确 定</el-button>
        <el-button @click="cancelWorkPeo">取 消</el-button>
      </div>
    </el-dialog>

    <!--    选择质检人员-->
    <el-dialog title="选择质检人员" :visible.sync="workQcPeoDialogVisible" width="50%" append-to-body
               @open="getWorkPeoList"
    >
      <RuoYiUserTree :selected-user.sync="workQcPeo" @close="closeQcPeoDialog" />
    </el-dialog>

    <!-- 提交按钮 -->
    <MyConfirmBtnGroup :after-cancel-open-page="backPage" :ok-event="submitForm" />
  </div>
</template>

<script>
import { arrangePeo } from '@/api/yyj/pro/workTask'
import MyConfirmBtnGroup from '@/components/MyConfirmBtnGroup/index.vue'
import MyPopoverBtn from '@/components/MyPopoverBtn/index.vue'
import { listWorkGroup } from '@/api/yyj/pbs/workGroup'
import MyRadio from '@/components/MyRadio/index.vue'
import { listWorkGroupPeo } from '@/api/yyj/pbs/workGroupPeo'
import RuoYiUserTree from '@/components/RuoYiUserTree/index.vue'

export default {
  name: 'WorkTaskChange',
  dicts: ['yyj_common_status'],
  components: { RuoYiUserTree, MyRadio, MyPopoverBtn, MyConfirmBtnGroup },
  data() {
    return {
      backPage: '/pro/workTask',
      workGroupDialogVisible: false,
      // 生产班组查询参数
      workGroupQueryParams: {
        pageNum: 1,
        pageSize: 5,
        wgGTypeCode: null,
        wgCellCode: null,
        wgName: null,
        wgStatus: null,
        wgDesc: null,
        wgManager: null
      },
      // 加载生产班组
      workGroupLoading: true,
      // 生产班组数据
      workGroupList: [],
      // 生产班组总条数
      workGroupTotal: 0,
      workPeoDialogVisible: false,
      // 加载生产人员
      workPeoLoading: true,
      // 生产人员数据
      workGroupPeoList: [],
      // 生产人员穿梭框
      transferProps: {
        key: 'wgroupPeo',
        label: 'wgroupPeoName',
        disabled: false
      },
      // 质检人员对话框
      workQcPeoDialogVisible: false,
      // 选择的质检人员
      workQcPeo: {},
      // 表单参数
      form: {
        wtaskGroup: '',
        wtaskQcPeo: 0
      },
      // 表单校验
      rules: {
        // wtaskGroup: [
        //   {
        //     required: true, message: '生产班组不能为空'
        //   }
        // ],
        // wtaskQcPeo: [
        //   { required: true, message: '质检人员不能为空', trigger: 'blur' }
        // ]
      },
      prePbsWorkGroup: {},
      pbsWorkGroup: {},
      prePbsWorkPeo: [],
      pbsWorkPeo: [],
      showPbsWorkPeo: []
    }
  },
  computed: {
    getStatus() {
      return this.dict.type.yyj_common_status
    },
    // 获取班组集合的姓名
    getWorkPeoName() {
      if (!this.showPbsWorkPeo || this.showPbsWorkPeo.length <= 0) {
        return ''
      }
      return this.showPbsWorkPeo.map(e => e.wgroupPeoName)
    }
  },
  created() {
    this.getWorkGroupList()
  },
  methods: {
    // 关闭质检人员对话框
    closeQcPeoDialog() {
      this.form.wtaskQcPeo = this.workQcPeo.userId
      this.workQcPeoDialogVisible = false
    },
    // 确认生产人员
    okWorkPeo() {
      this.pbsWorkPeo = [...this.prePbsWorkPeo]
      this.showPbsWorkPeo = []
      this.workGroupPeoList.forEach(e1 => {
        this.pbsWorkPeo.forEach(e2 => {
          if (e1.wgroupPeo === e2) {
            this.showPbsWorkPeo.push(e1)
          }
        })
      })
      this.cancelWorkPeo()
    },
    // 取消生产人员
    cancelWorkPeo() {
      this.prePbsWorkPeo = []
      this.workPeoDialogVisible = false
    },
    // 筛选生产人员
    filterWorkPeo(query, item) {
      if (!query) {
        return true
      }
      const regex = new RegExp(query)
      if (regex.test(item.wgroupPeoName)) {
        return true
      }
    },
    // 打开生产人员对话框
    openWorkPeoDialog() {
      if (!this.pbsWorkGroup || Object.keys(this.pbsWorkGroup).length === 0) {
        this.$modal.msgError('请先选择生产班组!')
        return
      }
      this.prePbsWorkPeo = [...this.pbsWorkPeo]
      this.workPeoDialogVisible = true
    },
    /** 查询生产班组成员列表 */
    async getWorkPeoList() {
      this.workPeoLoading = true
      const res = await listWorkGroupPeo({
        wgroupWgCode: this.pbsWorkGroup.wgCode
      })
      this.workGroupPeoList = res.data
      this.workPeoLoading = false
    },
    // 确定生产班组
    okWorkGroup() {
      this.pbsWorkGroup = { ...this.prePbsWorkGroup }
      this.form.wtaskManager = this.pbsWorkGroup.wgManager
      this.form.wtaskManagerName = this.pbsWorkGroup.wgManagerName
      this.form.wtaskGroup = this.pbsWorkGroup.wgCode
      this.cancelWorkGroup()
    },
    // 取消生产班组
    cancelWorkGroup() {
      this.prePbsWorkGroup = {}
      this.workGroupDialogVisible = false
    },
    // 选择生产班组
    handleChangeWorkGroup(selection) {
      this.prePbsWorkGroup = selection
    },
    // 查询生产班组
    handleQueryWorkGroup() {
      this.workGroupQueryParams.pageNum = 1
      this.getWorkGroupList()
    },
    // 重置生产班组查询参数
    resetQueryWorkGroup() {
      this.resetForm('workGroupQueryForm')
      this.handleQueryWorkGroup()
    },
    // 打开生产班组
    openWorkGroupDialog() {
      this.prePbsWorkGroup = { ...this.pbsWorkGroup }
      this.workGroupDialogVisible = true
    },
    /** 查询生产班组列表 */
    async getWorkGroupList() {
      this.workGroupLoading = true
      const res = await listWorkGroup(this.workGroupQueryParams)
      this.workGroupList = res.rows
      this.workGroupTotal = res.total
      this.workGroupLoading = false
    },
    // 表单重置
    reset() {
      this.form = {}
      this.resetForm('form')
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(async valid => {
        if (valid) {
          this.form.wtaskCode = this.$route.params.wtaskCode
          this.form.wtaskStatus = '1'
          this.pbsWorkPeo = this.pbsWorkPeo.map(e => {
            return {
              wpWtaskCode: this.form.wtaskCode,
              wpWgCode: this.form.wtaskGroup,
              wpWorkPeoCode: e
            }
          })
          this.$modal.loading('正在提交...')
          await arrangePeo({
            proWorkTask: this.form,
            proWorkPeo: this.pbsWorkPeo
          })
          this.$modal.msgSuccess('派工成功')
          this.afterSubmit()
        }
      })
    },
    afterSubmit() {
      this.$tab.closeOpenPage()
      this.reset()
      this.$tab.refreshPage({
        path: this.backPage
      })
      this.$modal.closeLoading()
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/assets/styles/yyj/change";

.el-dialog .el-form-item {
  width: auto;
  padding: 0 10px 0 0 !important;
}
</style>
